<template>
    <el-dialog custom-class="add-dialog"
               :visible.sync="dialogTableVisible"
               :title="titleMsg"
               :close-on-click-modal="false">
        <el-form ref="form"
                 :rules="rules"
                 :model="formData"
                 label-width="110px"
                 class="box_acct_form">
            <el-row :gutter="24">
                <el-col :span="12" style="width: 100%">
                    <el-form-item label="开始时间:"
                                  prop="startdate">
                        <el-date-picker
                                v-model="formData.startdate"
                                align="right"
                                type="date"
                                placeholder="请输入开始时间"
                                :disabled="isNotEdit"
                                class="width-full">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="width: 100%">
                    <el-form-item label="结束时间:"
                                  prop="enddate">
                        <el-date-picker
                                v-model="formData.enddate"
                                align="right"
                                type="date"
                                placeholder="请输入结束时间"
                                :disabled="isNotEdit"
                                class="width-full">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12" style="width: 100%">
                    <el-form-item label="应缴金额:"
                                  prop="orderpay">
                        <el-input size="medium"
                                  :disabled="isNotEdit"
                                  v-model="formData.orderpay"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12" style="width: 100%">
                    <el-form-item label="缴费状态:"
                                  prop="orderstatus">
                        <el-select size="medium"
                                   clearable
                                   :disabled="isNotEdit"
                                   v-model="formData.orderstatus">
                            <el-option
                                    v-for="item in orderList"
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" v-if="this.actionType == 'edit'">
                <el-col :span="24">
                    <el-form-item label="通知缴费:">
                        <el-input type="textarea"
                                  :rows="3"
                                  v-model="formData.note"
                                  :disabled="isNotEdit"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" v-else>
                <el-col :span="24">
                    <el-form-item label="用户回复:">
                        <el-input type="textarea"
                                  :rows="3"
                                  v-model="formData.reply"
                                  disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer"
              class="dialog-footer">
            <el-button type="primary"
                       class="full-width"
                       @click="close">关闭</el-button>
      <el-button v-if="this.actionType == 'edit'"
                 type="primary"
                 class="full-width"
                 @click="save">通知</el-button>
      <el-button v-if="this.actionType == 'edit'"
                 type="primary"
                 class="full-width"
                 @click="reset">重置</el-button>
    </span>
    </el-dialog>
</template>

<script>
    import dateFunc from '@/utils/dateFunc'
    export default {
        name: "orderDialog",
        data(){
            return{
                actionType: '',
                dialogTableVisible: false,
                loading: false,
                formData:{
                    startdate: '',
                    enddate: '',
                    orderpay: '',
                    orderstatus: '',
                    note:'',
                    reply: '',
                },
                orderList: [
                    {
                        value: 1,
                        text: '已缴费',

                    },
                    {
                        value: 2,
                        text: '未缴费',
                    },
                ],
                // 校验规则
                rules:{
                    startdate:[
                        {required: true, message: '开始时间为空', trigger: 'blur'}
                    ],
                    enddate:[
                        {required: true, message: '结束时间为空', trigger: 'blur'}
                    ],
                    orderpay:[
                        {required: true, message: '应缴金额为空', trigger: 'change'}
                    ],
                    orderstatus:[
                        {required: true, message: '缴费状态为空', trigger: 'change'}
                    ]
                }
            }
        },
        computed: {
            titleMsg () {
                if (this.actionType == "edit") {
                    return "车位订单通知";
                } else {
                    return "车位订单详情";
                }
            },
            isNotEdit () {
                if (this.actionType == "detail") {
                    return true;
                } else {
                    return false;
                }
            },
        },
        methods:{
            init(row){
              this.formData = row
            },
            // 编辑保存
            save(){
                let startDt = dateFunc.format(this.formData.startdate,'YYYY-MM-DD hh:mm:ss');
                let endDt = dateFunc.format(this.formData.enddate,'YYYY-MM-DD hh:mm:ss');
                this.$refs['form'].validate((valid)=>{
                    if (!valid){
                        this.$message.error({
                            message: "必填项不能为空",
                            duration: 2000
                        });
                    } else {
                        this.$axiosToken({
                            url: '/parking/editParkOrder',
                            method: 'post',
                            data:{
                                u_id: this.formData.id,
                                startdate: startDt,
                                enddate: endDt,
                                orderpay: this.formData.orderpay,
                                orderstatus: this.formData.orderstatus,
                                note: this.formData.note
                            },
                            success: (result)=>{
                                this.$message({
                                    message: '通知成功',
                                    type: 'success',
                                    duration: 2000
                                });
                                this.$parent.getParkData()
                            }
                        });
                        this.dialogTableVisible = false
                    }
                })
            },
            // 重置
            reset(){
                this.formData={
                    startdate: '',
                    enddate: '',
                    orderpay: '',
                    orderstatus: '',
                    note:'',
                }
            },
            close(){
                this.dialogTableVisible = false
            }
        }
    }
</script>

<style scoped>
    /deep/.el-dialog__title{
        line-height: 24px;
        font-size: 20px;
        color: #303133;
        font-weight: bolder
    }
    .box_acct_form .el-row .el-col .el-form-item .el-form-item__content .el-input {
        width: 100%;
    }
    .box_acct_form .el-row .el-col .el-form-item .el-form-item__content .el-select {
        width: 100%;
    }

    .box_acct_form .el-row {
        margin-bottom: 0px;
    }
    /deep/ .add-dialog{
        width: 900px;
        margin: auto;
        overflow: auto;
    }
    .msg_form {
        margin: 7px 15px;
    }

    .msg_form .msg_title {
        clear: both;
        display: block;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        margin: 0 0 14px;
        position: relative;
        font-weight: bold;
    //color: #327501;
        color: #20a0ff;
        font-size: 16px;
    }

    /deep/ .msg_form .msg_title .msg_title_tips {
        color: #797979;
        font-weight: normal;
        font-size: 12px;
    }

    .msg_box {
        position: relative;
        width: 100%;
    }

    .btn_div {
        text-align: center;
    }
    .btn_div button {
        height: 32px;
        width: 107px;
    }

    .box_content {
        background: #f9f9f9;
        border: 1px solid #d1d1d1;
        padding: 15px;
        margin: 0px 10px;
        position: relative;
    }
    .el-button{
        width: 60px;
        height: 36px;
        font-size: 14px;
    }
    /deep/.el-form-item{
        margin-top: 15px;
    }
    /deep/.el-input.is-disabled .el-input__inner {
        background-color: #f4f3f2;
        border-color: #E4E7ED;
        color: #56637d;
        cursor: not-allowed;
    }
    /deep/.el-textarea.is-disabled .el-textarea__inner {
         background-color: #f4f3f2;
         border-color: #E4E7ED;
         color: #C0C4CC;
         cursor: not-allowed;
     }

</style>